<template>
	<view v-if="txt.replace(/\s*/g,'')" class="play_btn_txt" :style="{background: bg}">
		<u-icon name="play-right-fill" :color="color" size="20"></u-icon>
		<view class="u-font-20 txt" :style="{color: color}">{{txt}}</view>
	</view>
	<view v-else class="play_btn_txt" :style="{background: bg}">
		<u-icon name="play-right-fill" :color="color" size="20"></u-icon>
	</view>
</template>
<script>
	export default {
		name: "play_btn",
		props: {
			txt: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#fff'
			},
			bg: {
				type: String,
				default: 'rgba(0,0,0,.5)'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.play_btn_txt {
		padding: 0 16rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		.txt {
			margin-left: 6rpx;
			font-weight: normal;
		}
	}
</style>
